<template>
	<view class="container">
		<view class="goods-info">
			<image class="goods-image" :src="`http://43.248.190.25:8985/`+product.url"></image>
			<view class="goods-title">{{product.description}}</view>
			<view class="goods-price">商品价格：{{product.score}}积分</view>
		</view>
		<view class="exchange-btn">
			<input class="bt" v-model="num" placeholder="输入兑换数量" type="number" />
			<button class="bt" @click="goToExchange">立即兑换</button>
		</view>
	</view>
</template>

<script>
	import {
		getProductById,
		buyProduct
	} from '@/request/api/product'
	export default {
		data() {
			return {
				id: undefined,
				product: {},
				num: '',
			}
		},
		methods: {
			goToExchange() {
				if (!this.num && this.num <= 0) {
					uni.showToast({
						title: '兑换商品数量需大于0',
						icon: 'error'
					})
					return
				}
				buyProduct(this.id, this.num).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
					}
				})

			}
		},
		onLoad: function(option) {
			this.id = option.id
			if (this.id) {
				getProductById(this.id).then(res => {
					this.product = res.data
					uni.setNavigationBarTitle({
						title: this.product.title
					})
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 15px;
		height: 100%;
		display: flex;
		flex-flow: column;
	}

	.goods-info {
		/* 样式代码 */
		display: flex;
		flex: 1;
		flex-flow: column;
	}

	.goods-image {
		width: 100%;
		height: 300px;
		/* 样式代码 */
	}

	.goods-title {
		/* 样式代码 */
	}

	.goods-price {
		/* 样式代码 */
	}

	.exchange-btn {
		display: flex;
		flex-direction: row;
	}

	.exchange-btn .bt {
		/* 样式代码 */
		display: flex;
		flex: 1;
		justify-content: center;

	}

	.exchange-btn input {
		border: 1px solid gray;
		height: 100%;
		text-align: left;
		border-radius: 4px;
		padding: 5px;
		box-sizing: border-box;
	}

	.exchange-btn button {
		background-color: red;
		color: white;
		margin-left: 5px;
	}
</style>